<script setup>
import QrcodeVue from "qrcode.vue"
import {  defineProps } from "vue"

const props = defineProps({
  data: Number
})
const cardids =props.data.memberCardIds.split(',')
</script>

<template>
  <div class="qr_banner" v-if="cardids.length>0">
    <van-swipe>
      <van-swipe-item v-for="item in cardids" :key="item">
        <div class="swipe_item_box">
          <qrcode-vue :value="item" :size="100" level="H" />
          <div class="text">票券码：{{ item }}</div>
        </div>
      </van-swipe-item>
      <template #indicator="{ active, total }" >
        <div class="custom-indicator">
          <div class="custom-indicator_box">
            <span class="active">{{active + 1  || "0 "}}</span>
            <span class="line">/</span>
            {{total || "0" }}
          </div>
        </div>
      </template>
    </van-swipe>
  </div>
</template>

<style scoped lang="scss">
.qr_banner{
  .swipe_item_box{
    display: flex;
    flex-direction: column;
    align-items: center;
    .text{
      margin-top: 2rem;
      font-size: 1.4rem;
      color: #333333;
    }
  }
}
.custom-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
  font-size: 1.2rem;
  color: #333333;
  .custom-indicator_box{
    background: rgba(51,51,51,0.05);
    border-radius: .3rem;
    padding: 0 .8rem;
    .active{
      color: var(--van-primary-color);
    }
    .line{
    }
  }
}
</style>